<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="12" :xs="24">
				<el-card class="box-card">
					<template v-slot:header>
						<div class="clearfix">
							<span>个人信息</span>
						</div>
					</template>
					<div>
						<div class="text-center">
							<userAvatar/>
						</div>
						<ul class="list-group list-group-striped">
							<li class="list-group-item">
								<svg-icon icon-class="number"/>
								学/工号
								<div class="pull-right">{{ state.user.userName }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="user"/>
								身份证号
								<div class="pull-right">{{ state.user.idNumber }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="logininfor"/>
								姓名
								<div class="pull-right">{{ state.user.nickName }}</div>
							</li>
							<li class="list-group-item">
								<el-icon>
									<component :is="state.user.sex === '0' ? 'Male' : 'Female'"/>
								</el-icon>
								性别
								<div class="pull-right">{{ state.user.sex === '0' ? '男' : '女' }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="date"/>
								出生日期
								<div class="pull-right">{{ state.user.birthDate }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="tree"/>
								所在党/团组织
								<div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="peoples"/>
								角色
								<div class="pull-right">{{ state.roleGroup }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="date"/>
								创建日期
								<div class="pull-right">{{ state.user.createTime }}</div>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12" :xs="24">
				<el-card>
					<template v-slot:header>
						<div class="clearfix">
							<span>修改密码</span>
						</div>
					</template>
					<resetPwd/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import resetPwd from "./resetPwd";
import {getUserProfile} from "@/api/system/user";

const state = reactive({
	user: {},
	roleGroup: {},
	postGroup: {}
});

function getUser() {
	getUserProfile().then(response => {
		state.user = response.data;
		state.roleGroup = response.roleGroup;
		state.postGroup = response.postGroup;
	});
};

getUser();
</script>
